<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-10 (新)Vue中的事件绑定</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 总结：
        1. 冒泡是从里往外冒，捕获是从外往里捕。
        2. 当捕获存在时，先从外到里的捕获，剩下的从里到外的冒泡输出。
        https://blog.csdn.net/weixin_42504805/article/details/129166807 -->
        <div @click.capture="handleClickOuter">
            <div @click.capture="handleClickInner">hello world</div>
        </div>

        <input @keydown="handleKeyDown" />

        <input @keydown.enter="handleKeyDown" />

        <div @click.right="handleRight">鼠标右键</div>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                handleClickOuter() {
                    alert("handleClickOuter");
                },
                handleClickInner() {
                    alert("handleClickInner");
                },
                handleKeyDown(e) {
                    console.log(e.target.value);
                },
                handleRight() {
                    console.log("handleRight");
                }
            },
        })
    </script>
</body>

</html>